<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Xenon Boostrap Admin Panel" />
<meta name="author" content="" />

<title>Xenon - Progress Bars</title>

<link rel="stylesheet" href="assets/css/fonts/linecons/css/linecons.css">
<link rel="stylesheet"
	href="assets/css/fonts/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/xenon-core.css">
<link rel="stylesheet" href="assets/css/xenon-forms.css">
<link rel="stylesheet" href="assets/css/xenon-components.css">
<link rel="stylesheet" href="assets/css/xenon-skins.css">
<link rel="stylesheet" href="assets/css/custom.css">

<script src="assets/js/jquery-1.11.1.min.js"></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->


</head>
<body class="page-body">

	<div class="settings-pane">

		<a href="#" data-toggle="settings-pane" data-animate="true">
			&times; </a>

		<div class="settings-pane-inner">

			<div class="row">

				<div class="col-md-4">

					<div class="user-info">

						<div class="user-image">
							<a href="extra-profile.html"> <img
								src="assets/images/user-2.png" class="img-responsive img-circle" />
							</a>
						</div>

						<div class="user-details">

							<h3>
								<a href="extra-profile.html">John Smith</a>

								<!-- Available statuses: is-online, is-idle, is-busy and is-offline -->
								<span class="user-status is-online"></span>
							</h3>

							<p class="user-title">Web Developer</p>

							<div class="user-links">
								<a href="extra-profile.html" class="btn btn-primary">Edit
									Profile</a> <a href="extra-profile.html" class="btn btn-success">Upgrade</a>
							</div>

						</div>

					</div>

				</div>

				<div class="col-md-8 link-blocks-env">

					<div class="links-block left-sep">
						<h4>
							<span>Notifications</span>
						</h4>

						<ul class="list-unstyled">
							<li><input type="checkbox" class="cbr cbr-primary"
								checked="checked" id="sp-chk1" /> <label for="sp-chk1">Messages</label>
							</li>
							<li><input type="checkbox" class="cbr cbr-primary"
								checked="checked" id="sp-chk2" /> <label for="sp-chk2">Events</label>
							</li>
							<li><input type="checkbox" class="cbr cbr-primary"
								checked="checked" id="sp-chk3" /> <label for="sp-chk3">Updates</label>
							</li>
							<li><input type="checkbox" class="cbr cbr-primary"
								checked="checked" id="sp-chk4" /> <label for="sp-chk4">Server
									Uptime</label></li>
						</ul>
					</div>

					<div class="links-block left-sep">
						<h4>
							<a href="#"> <span>Help Desk</span>
							</a>
						</h4>

						<ul class="list-unstyled">
							<li><a href="#"> <i class="fa-angle-right"></i> Support
									Center
							</a></li>
							<li><a href="#"> <i class="fa-angle-right"></i> Submit a
									Ticket
							</a></li>
							<li><a href="#"> <i class="fa-angle-right"></i> Domains
									Protocol
							</a></li>
							<li><a href="#"> <i class="fa-angle-right"></i> Terms of
									Service
							</a></li>
						</ul>
					</div>

				</div>

			</div>

		</div>

	</div>

	<div class="page-container">
		<!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->

		<jsp:include page="menu.jsp" flush="true" >
			<jsp:param name="selectSuper" value="1"/> 
     		<jsp:param name="selectIndex" value="4"/> 
		</jsp:include>

		<div class="main-content">

			<jsp:include page="title.jsp" flush="true" />

			<div class="page-title">

				<div class="title-env">
					<h1 class="title">下载中心</h1>
					<p class="description">可以查看正在下载的任务</p>
				</div>
			</div>
			
			<script type="text/javascript">
				function changeDownloadSaete(UID,isDownloading){
						$.ajax({
  								type: 'POST',
  								url: 'common/changeDownloadSate',
  								data: {"UID":UID,"isDownloading":isDownloading},
  								dataType: 'json',
 			 					success: function(data){
 			 						if(data.message=="success"){
 			 							
 			 						}else{
 			 							
 			 						}
 			 					}
						});
				}
				
				function loadList(){
					$.ajax({
  								type: 'GET',
  								url: 'common/getDownloadList',
  								data: '',
  								dataType: 'json',
 			 					success: function(data){
 			 						var content = "";
 			 						for(var i = 0;i<data.downloadList.length;i++){
 			 							content += getconten(data.downloadList[i]);
 			 						}
 			 						for(var i = 0;i<data.downloadTempList.length;i++){
 			 							content += getconten(data.downloadTempList[i]);
 			 						}
 			 						$("#downloadList").html(content);
 			 						window.setTimeout(function(){loadList();},2000);
 			 					}
						});
				}
				
				$(document).ready(function(){
						loadList();
				});
				
				
				
				function getconten(json){
					var content = "<div class='panel panel-default'>";
					 	content += "	<div class='panel-heading'>";
					 	content += "		<div class='panel-title'>"+json.fileName+"</div>";
					 	content += "	</div>";
					 	content += "	<div class='panel-body'>";
					 	content += "		<div class='col-md-12'>";
					 	content += "			<span>文件大小:"+conver(json.progres)+"/"+conver(json.maxProgres)+"</span>";
					 	content += "		</div>";
					 	content += "		<HR>";
					 	content += "		<div class='col-md-8'>";
					 	content += "			<span>下载速度:"+conver(json.speed)+"/S</span>";
					 	content += "		</div>";
					 	content += "		<div class='col-md-2'>";
					 	content += "			<span>已完成:"+json.unitProgress+"%</span>";
					 	content += "		</div>";
					 	content += "		<div class='col-md-2'>";
					 	if(json.downloadState=="DOWNLOADING"){
					 		content += "			<button class='btn btn-info col-md-8' style='padding:0;' onclick=\"changeDownloadSaete('"+json.uID+"','"+json.downloadState+"');\">暂停</button>";
					 	}else if(json.downloadState=="SUSPEND"){
					 		content += "			<button class='btn btn-info col-md-8' style='padding:0;' onclick=\"changeDownloadSaete('"+json.uID+"','"+json.downloadState+"');\">继续</button>";
					 	}else if(json.downloadState=="CONTINUE"){
					 		content += "			<button class='btn btn-info col-md-8' style='padding:0;' onclick=\"changeDownloadSaete('"+json.uID+"','"+json.downloadState+"');\">等待中</button>";
					 	}
					 	content += "		</div>";
					 	content += "		<div class='row'>";
					 	content += "			<div class='col-md-12'>";
					 	content += "				<div class='progress progress-striped'>";
					 	content += "					<div class='progress-bar progress-bar-warning' role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width:"+json.unitProgress+"%'>";
					 	content += "						<span class='sr-only'></span>";
					 	content += "					</div>";
					 	content += "				</div>";
					 	content += "			</div>";
					 	content += "		</div>";
					 	content += "	</div>";
					 	content += "</div>";
					 return content;
				}
				
				function conver(limit){  
        				var size = "";  
        				if( limit < 0.9 * 1024 ){ //如果小于0.1KB转化成B  
            				size = limit.toFixed(2) + "B";    
        				}else if(limit < 0.9 * 1024 * 1024 ){//如果小于0.1MB转化成KB  
           	 				size = (limit / 1024).toFixed(2) + "KB";              
        				}else if(limit < 0.9 * 1024 * 1024 * 1024){ //如果小于0.1GB转化成MB  
            				size = (limit / (1024 * 1024)).toFixed(2) + "MB";  
        				}else{ //其他转化成GB  
           	 				size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB";  
        				}  
          
        				var sizestr = size + "";   
        				var len = sizestr.indexOf("\.");  
        				var dec = sizestr.substr(len + 1, 2);  
        				if(dec == "00"){//当小数点后为00时 去掉小数部分  
            				return sizestr.substring(0,len) + sizestr.substr(len + 3,2);  
        				}  
        				return sizestr;  
    				}  
			</script>
			
			<div class="row">

				<div class="col-md-12" id="downloadList">
					
					
					
					
					

					
					
					
				</div>
			</div>






			<!-- Main Footer -->
			<!-- Choose between footer styles: "footer-type-1" or "footer-type-2" -->
			<!-- Add class "sticky" to  always stick the footer to the end of page (if page contents is small) -->
			<!-- Or class "fixed" to  always fix the footer to the end of page -->
			<footer class="main-footer sticky footer-type-1">

			<div class="footer-inner">

				<!-- Add your copyright text here -->
				<div class="footer-text">
					&copy; 2014 <strong>Xenon</strong> More Templates <a
						href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a>
					- Collect from <a href="http://www.cssmoban.com/" title="网页模板"
						target="_blank">网页模板</a>
				</div>


				<!-- Go to Top Link, just add rel="go-top" to any link to add this functionality -->
				<div class="go-up">

					<a href="#" rel="go-top"> <i class="fa-angle-up"></i>
					</a>

				</div>

			</div>

			</footer>
		</div>


		<!-- start: Chat Section -->
		<div id="chat" class="fixed">

			<div class="chat-inner">


				<h2 class="chat-header">
					<a href="#" class="chat-close" data-toggle="chat"> <i
						class="fa-plus-circle rotate-45deg"></i>
					</a> Chat <span class="badge badge-success is-hidden">0</span>
				</h2>

				<script type="text/javascript">
					// Here is just a sample how to open chat conversation box
					jQuery(document)
							.ready(
									function($) {
										var $chat_conversation = $(".chat-conversation");

										$(".chat-group a")
												.on(
														'click',
														function(ev) {
															ev.preventDefault();

															$chat_conversation
																	.toggleClass('is-open');

															$(
																	".chat-conversation textarea")
																	.trigger(
																			'autosize.resize')
																	.focus();
														});

										$(".conversation-close")
												.on(
														'click',
														function(ev) {
															ev.preventDefault();
															$chat_conversation
																	.removeClass('is-open');
														});
									});
				</script>


				<div class="chat-group">
					<strong>Favorites</strong> <a href="#"><span
						class="user-status is-online"></span> <em>Catherine J.
							Watkins</em></a> <a href="#"><span class="user-status is-online"></span>
						<em>Nicholas R. Walker</em></a> <a href="#"><span
						class="user-status is-busy"></span> <em>Susan J. Best</em></a> <a
						href="#"><span class="user-status is-idle"></span> <em>Fernando
							G. Olson</em></a> <a href="#"><span class="user-status is-offline"></span>
						<em>Brandon S. Young</em></a>
				</div>


				<div class="chat-group">
					<strong>Work</strong> <a href="#"><span
						class="user-status is-busy"></span> <em>Rodrigo E. Lozano</em></a> <a
						href="#"><span class="user-status is-offline"></span> <em>Robert
							J. Garcia</em></a> <a href="#"><span class="user-status is-offline"></span>
						<em>Daniel A. Pena</em></a>
				</div>


				<div class="chat-group">
					<strong>Other</strong> <a href="#"><span
						class="user-status is-online"></span> <em>Dennis E. Johnson</em></a> <a
						href="#"><span class="user-status is-online"></span> <em>Stuart
							A. Shire</em></a> <a href="#"><span class="user-status is-online"></span>
						<em>Janet I. Matas</em></a> <a href="#"><span
						class="user-status is-online"></span> <em>Mindy A. Smith</em></a> <a
						href="#"><span class="user-status is-busy"></span> <em>Herman
							S. Foltz</em></a> <a href="#"><span class="user-status is-busy"></span>
						<em>Gregory E. Robie</em></a> <a href="#"><span
						class="user-status is-busy"></span> <em>Nellie T. Foreman</em></a> <a
						href="#"><span class="user-status is-busy"></span> <em>William
							R. Miller</em></a> <a href="#"><span class="user-status is-idle"></span>
						<em>Vivian J. Hall</em></a> <a href="#"><span
						class="user-status is-offline"></span> <em>Melinda A.
							Anderson</em></a> <a href="#"><span class="user-status is-offline"></span>
						<em>Gary M. Mooneyham</em></a> <a href="#"><span
						class="user-status is-offline"></span> <em>Robert C. Medina</em></a> <a
						href="#"><span class="user-status is-offline"></span> <em>Dylan
							C. Bernal</em></a> <a href="#"><span class="user-status is-offline"></span>
						<em>Marc P. Sanborn</em></a> <a href="#"><span
						class="user-status is-offline"></span> <em>Kenneth M.
							Rochester</em></a> <a href="#"><span class="user-status is-offline"></span>
						<em>Rachael D. Carpenter</em></a>
				</div>

			</div>

			<!-- conversation template -->
			<div class="chat-conversation">

				<div class="conversation-header">
					<a href="#" class="conversation-close"> &times; </a> <span
						class="user-status is-online"></span> <span class="display-name">Arlind
						Nushi</span> <small>Online</small>
				</div>

				<ul class="conversation-body">
					<li><span class="user">Arlind Nushi</span> <span class="time">09:00</span>
						<p>Are you here?</p></li>
					<li class="odd"><span class="user">Brandon S. Young</span> <span
						class="time">09:25</span>
						<p>This message is pre-queued.</p></li>
					<li><span class="user">Brandon S. Young</span> <span
						class="time">09:26</span>
						<p>Whohoo!</p></li>
					<li class="odd"><span class="user">Arlind Nushi</span> <span
						class="time">09:27</span>
						<p>Do you like it?</p></li>
				</ul>

				<div class="chat-textarea">
					<textarea class="form-control autogrow"
						placeholder="Type your message"></textarea>
				</div>

			</div>

		</div>
		<!-- end: Chat Section -->


	</div>






	<!-- Bottom Scripts -->
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/TweenMax.min.js"></script>
	<script src="assets/js/resizeable.js"></script>
	<script src="assets/js/joinable.js"></script>
	<script src="assets/js/xenon-api.js"></script>
	<script src="assets/js/xenon-toggles.js"></script>


	<!-- JavaScripts initializations and stuff -->
	<script src="assets/js/xenon-custom.js"></script>
<div class="xenon-loading-bar"><span data-pct="0"></span></div>
</body>
</html>
